<template>
  <div class="advanced-analysis-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>高级模型分析流程模拟</span>
          <div>
            <el-button type="primary" size="small" @click="startAdvancedAnalysis">模拟模型分析</el-button>
            <el-button type="success" size="small" @click="exportReport" style="margin-left: 10px;">导出报告</el-button>
          </div>
        </div>
      </template>

      <el-steps :active="step" align-center style="margin-bottom: 20px">
        <el-step title="模型配置" />
        <el-step title="训练过程" />
        <el-step title="评估验证" />
        <el-step title="可视化分析" />
        <el-step title="结论摘要" />
      </el-steps>

      <!-- 模拟分析内容 -->
      <div v-if="step === 0" class="step-box">
        已配置3层神经网络结构：输入层(10)、隐藏层(64, 32)、输出层(1)，激活函数为 ReLU。
      </div>
      <div v-else-if="step === 1" class="step-box">
        模拟训练中... 当前损失值 <b>0.018</b>，学习率为 0.001，训练时间约 18 秒。
      </div>
      <div v-else-if="step === 2" class="step-box">
        模型准确率为 <b>94.2%</b>，F1值为 <b>0.913</b>，验证集表现稳定。
      </div>
      <div v-else-if="step === 3" class="step-box">
        可视化展示生成中（示意图如下）。
      </div>
      <div v-else-if="step === 4" class="step-box">
        模型完成分析，具备部署价值。可进入模型管理阶段。
      </div>

      <!-- 保留图表区，始终显示 -->
      <div class="chart-panel">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div class="chart-title">损失函数曲线</div>
              <img src="https://echarts.apache.org/examples/data/thumb/line-simple.png" width="100%" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div class="chart-title">准确率趋势图</div>
              <img src="https://echarts.apache.org/examples/data/thumb/line-stack.png" width="100%" />
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import { saveAs } from 'file-saver'

const step = ref(0)

function startAdvancedAnalysis() {
  step.value = 0
  const interval = setInterval(() => {
    if (step.value >= 4) {
      clearInterval(interval)
    } else {
      step.value++
    }
  }, 1200)
}

function exportReport() {
  const content = `
高级模型分析报告（模拟）

步骤摘要：
1. 模型配置：
   - 结构：输入层(10)，隐藏层(64, 32)，输出层(1)
   - 激活函数：ReLU

2. 训练过程：
   - 训练轮数：500
   - 损失值：0.018
   - 学习率：0.001

3. 评估验证：
   - 准确率：94.2%
   - F1 值：0.913

4. 可视化分析：
   - 损失函数与准确率曲线已生成

5. 总结：
   - 模型收敛良好，泛化能力强，建议用于后续部署。
  `

  const blob = new Blob([content], {
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'
  })
  saveAs(blob, '高级模型分析报告.doc')
}

</script>

<style scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-box {
  background: #f9f9f9;
  padding: 20px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  margin-bottom: 20px;
  min-height: 120px;
}
.chart-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.chart-panel {
  margin-top: 20px;
}

</style>
